<template>
	<view class="distribution-status">
		<view class="vip-status">
			<view class="vip-status-item" :class="{'active':isVip == 2}" @click="selectVipStatus(2)">
				已开通会员
			</view>
			<view class="vip-status-item" :class="{'active':isVip == 1}" @click="selectVipStatus(1)">
				未开通会员
			</view>
		</view>
		<template v-if="inviteCustomerList.length">
			<view class="user-distribution-status" v-for="(item,index) in inviteCustomerList" :key="item.customer_id">
				<view class="user-info-container">
					<view class="user-info-avatar">
						<u-image :src="item.avatars" width="100%" height="100%" border-radius="50%" mode="aspectFill" />
					</view>
					<view class="user-info-right">
						<view class="user-nickname">
							{{item.nickname}}
							<view class="user-relation">
								{{item.relation == 1?'直推':'间推'}}
							</view>
						</view>
						<view class="user-phone">
							{{item.phone}}
							<view class="copy" @click="callPhone(item.phone)">拨号</view>
						</view>
					</view>
				</view>
				<view class="invited-number">
					<view class="invited-number-item">
						已邀请人数：{{item.inviteNum}}人
					</view>
					<view class="invited-number-item">
						下级开会员人数：{{item.inviteVipNum}}人
					</view>
					<view class="invited-number-item">
						下级未开通会员人数：{{item.inviteNotVipNum}}人
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isVip: 2,
				inviteCustomerList: []
			}
		},
		async created() {
			await this.$loginStatus;
			this.getInviteCustomerGroup();
		},
		methods: {
			async getInviteCustomerGroup() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getInviteCustomerGroup, {
					is_vip: this.isVip
				});
				this.inviteCustomerList = data.data;
				console.log(this.inviteCustomerList)
			},
			selectVipStatus(e) {
				this.isVip = e;
				this.getInviteCustomerGroup();
			},
			copy(phone) {
				uni.setClipboardData({
					data: phone,
					success: () => {
						this.$showToast('已复制到剪贴板')
					}
				});
			},
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./distributionStatus.scss";
</style>
